// import axios from 'axios';
// 左边的柱状图
var citys =
  "吉州区、青原区、吉安县、新干县、永丰县、峡江县、吉水县、泰和县、万安县、遂川县、安福县、永新县、井冈山市".split(
    "、"
  );

(function () {
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "5%",
      top: "5%",
      right: "0%",
      buttom: "0%",
      containLable: true,
    },
    // axisTick: {
    //   aligWithLabel: true,
    // },
    xAxis: {
      type: "category",
      data: citys.slice(7),
      axisLabel: {
        color: "#4c9bfd",
        fontSize: "14",
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#4c9bfd",
        fontSize: "14",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255, 0.1) ",
          with: 2,
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255, 0.1) ",
        },
      },
    },
    series: [
      {
        data: [12, 20, 15, 8, 7, 11, 13],
        barWidth: "40%",
        type: "bar",
        itemStyle: {
          barBorderRadius: 5,
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 左边的折线图
(function () {
  var myChart = echarts.init(document.querySelector(".line .chart"));
  var option = {
    color: ["red", "green"],
    tooltip: {
      trigger: "axis",
      color: "rgba(255,255,255, 0.6) ",
      fontSize: "14",
    },
    legend: {
      data: ["新增人数", "出院人数"],
      textStyle: {
        color: "#4c9bfd",
      },
      // right: "10%",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "10%",
      containLabel: true,
      borderColor: "#012f4a",
      show: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: citys.slice(7),
      axisLabel: {
        color: "#4c9bfd",
        fontSize: "14",
      },
      axisTick: {
        // 去除刻度线
        show: false,
      },
      axisLine: {
        // 去除周内间距
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#4c9bfd",
        fontSize: "14",
      },
      axisTick: {
        // 去除刻度线
        show: false,
      },
      axisLine: {
        // 去除周内间距
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a",
        },
      },
    },
    series: [
      {
        name: "新增人数",
        type: "line",
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
      },
      {
        name: "出院人数",
        type: "line",
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
      },
    ],
  };
  axios
    .get("json/data.json")
    .then(function (response) {
      // 处理成功情况
      console.log(response);
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    });
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
  var data1 = [
    {
      name: "month",
      data: [
        [12, 13, 11, 13, 9, 23, 21],
        [22, 18, 19, 23, 29, 33, 31],
      ],
    },
    {
      name: "week",
      data: [
        [220, 182, 191, 234, 290, 330, 310],
        [120, 132, 101, 134, 90, 230, 210],
      ],
    },
  ];
  $(".line h2").on("click", "a", function () {
    // console.log($(this).index());
    // console.log(data1[$(this).index()]);
    var obj = data1[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    myChart.setOption(option);
  });
})();

// 左边的饼图
(function () {
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/> {b} : {c} {d}%",
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: 14,
      },
    },
    grid: {
      // top: "50%",
      // left: "30%",
      // bottom: "0%",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["45%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "10",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 10, name: citys[0] },
          { value: 12, name: citys[1] },
          { value: 13, name: citys[2] },
          { value: 14, name: citys[3] },
          { value: 15, name: citys[4] },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 右边的柱状图
(function () {
  var colorList = ["#1089e7", "#f57474", "#56D0e3", "#f8b448", "#8b78f6"];
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  var option = {
    grid: {
      top: "5%",
      left: "4%",
      right: "4%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      show: false,
    },
    yAxis: [
      {
        inverse: true,
        type: "category",
        data: citys.slice(7),
        inserve: true,
        axisLabel: {
          color: "#fff",
          fontSize: "16",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      {
        data: [18, 23, 29, 70, 44, 63],
        inverse: true,
        axisLabel: {
          color: "#fff",
          fontSize: "16",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        yAxisIndex: 0,
        name: "条",
        type: "bar",
        data: [18, 23, 29, 70, 44, 63],
        barWidth: 10,
        barCategoryGap: 50,
        itemStyle: {
          barBorderRadius: 30,
          color: function (params) {
            var num = colorList.length;
            // console.log(params);
            return colorList[params.dataIndex % num];
          },
        },
        label: {
          show: true,
          position: "inside",
          formatter: "{c}%",
        },
      },
      {
        yAxisIndex: 1,
        name: "框",
        type: "bar",
        barWidth: 15,
        barCategoryGap: 50,
        data: [100, 100, 100, 100, 100, 100],
        itemStyle: {
          color: "none",
          barBorderRadius: 15,
          borderWidth: 3,
          borderColor: "#00c1de",
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 右边的折线图
(function () {
  var myChart = echarts.init(document.querySelector(".line2 .chart"));
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: citys.slice(7),
      textStyle: {
        color: "rgba(255,255,255, 0.5) ",
        fontSize: "14",
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "20%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: citys.slice(2,8),
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255, 0.6) ",
            fontSize: "14",
          },
        },
        axisLine: {
          color: "rgba(255,255,255, 0.2) ",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255, 0.6) ",
            fontSize: "14",
          },
        },
        axisLine: {
          color: "rgba(255,255,255, 0.2) ",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255, 0.1) ",
          },
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "line",
        lineStyle: {
          width: "5",
        },
        smooth: true,
        label: {
          show: true,
          position: "top",
          // color: "rgba(255,255,255,0.6)",
        },

        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [3, 7, 5, 9, 12, 10, 5],
      },  
      {
        name: "Search Engine",
        type: "line",
        smooth: true,
        lineStyle: {
          color: "skyblue",
          width: "5",
        },
        label: {
          show: true,
          position: "top",
          color: "skyblue",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              ({
                offset: 0,
                color: "rgba(1,132,213,0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(1,132,213,0.4)",
              }),
            ],
            false
          ),
          shadowColor: "rgba(0,0,0,0.1)",
        },
        emphasis: {
          focus: "series",
        },
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: "skyblue",
          borderColor: "rgba(221, 220, 107, 0.1)",
          borderWidth: 12,
        },
        data: [18, 12, 15, 8, 10, 7, 3],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 右边的饼图
(function () {
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));
  var option = {
    // legend: {
    //   top: "bottom",
    // },
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          fontSize: 14,
        },
        data: [
          { value: 40, name: citys[2] },
          { value: 38, name: citys[3] },
          { value: 32, name: citys[0] },
          { value: 30, name: citys[4] },
          { value: 28, name: citys[5] },
          { value: 26, name: citys[10] },
          { value: 22, name: citys[8] },
          { value: 18, name: citys[7] },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 地图组件
(function () {
  var myChart = echarts.init(document.querySelector(".map .mapchart"));
  $.get("./json/jian.json", function (geoJson) {
    echarts.registerMap("jian", geoJson, {});

    var option = {
      visualMap: {
        min: 0,
        max: 10000,
        left: "left",
        top: "bottom",
        text: ["高", "低"],
        // 文本，默认为数值文本
        // calculable: true,
        // color: ['blue', 'blue'],
        //图例颜色
        pieces: [
          {
            min: 5000,
            max: 99999,
            label: ">5000",
            color: "#2E0000",
          },
          {
            min: 1000,
            max: 4999,
            label: "1000-4999",
            color: "#740001",
          },
          {
            min: 500,
            max: 999,
            label: "500-999",
            color: "#A50002",
          },
          {
            min: 100,
            max: 499,
            label: "100-499",
            color: "#EA0002",
          },
          {
            min: 10,
            max: 99,
            label: "10-99",
            color: "#F25669",
          },
          {
            min: 0,
            max: 9,
            label: "0-9",
            color: "#ffffff",
          },
        ],
        orient: "vertical",
        itemWidth: 25,
        itemHeight: 15,
        showLabel: true,
        seriesIndex: [0],
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "map",
          mapType: "jian",
          zoom: 1.1,
          label: {
            normal: {
              areaColor: "rgba(255,255,255,0.5)",
              show: true,
              color: "white",
            },
            emphasis: {
              textStyle: {
                color: "white",
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "#fff",
              // 地图背景色
              areaColor: "rgba(20, 41, 87,0.8)",
            },
            emphasis: {
              // 选中的时候地图的颜色
              areaColor: "rgba(0, 191, 255,0.5)",
              borderWidth: 0,
            },
          },
          animation: false,
          data: [
            {
              name: "青原区",
              value: 222,
            },
            {
              name: "吉州区",
              value: 1111,
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  });
})();
